<template>
  <!-- 分类目录 -->
  <div class="classifieds-container component-classifieds">
    <div :class="['classifieds-box', inShop ? 'in-shop' : '']">
      <div
        v-if="!inShop"
        class="c-left"
      >
        <div
          v-if="scrollTop > 48"
          class="up-arrow"
          @click="handleUpOrDownClick('up')"
        >
          <img
            src="@/assets/images/up-arrow.png"
            alt
          >
        </div>
        <ul
          ref="scrollBoxRef"
          class="list"
        >
          <li
            v-for="(item, index) in categoryList"
            :key="index"
            :class="['c-item', item.categoryId===firstCategroyCategoryId ? 'active' : '']"
            @click="switchCategoryItem(item.categoryId)"
          >
            <div class="category">
              <div class="c-name">
                {{ item.categoryName }}
              </div>
            </div>
            <img
              v-if="item.categoryId===firstCategroyCategoryId"
              class="c-arrow-icon"
              src="@/assets/images/c-arrow01.png"
              alt
            >
            <img
              v-if="item.categoryId!==firstCategroyCategoryId"
              class="c-arrow-icon"
              src="@/assets/images/c-arrow02.png"
              alt
            >
          </li>
        </ul>
        <div
          v-if="!isBottoming&&categoryList.length >= 9"
          class="down-arrow"
          @click="handleUpOrDownClick('down')"
        >
          <img
            src="@/assets/images/down-arrow.png"
            alt
          >
        </div>
      </div>
      <div class="c-right">
        <div
          v-if="!inShop"
          class="sub-category"
        >
          <!-- 平台二级分类 -->
          <div
            v-for="(subItem,index) in subCategoryList"
            :key="index"
            class="sub-item"
          >
            <div
              class="second-level"
              @click="toProdList(firstCategroyCategoryId, subItem.categoryId,null, 0)"
            >
              <div class="c-name">
                {{ subItem.categoryName }}
              </div>
              <img
                v-if="subItem.selected"
                class="c-arrow-icon"
                src="@/assets/images/c-arrow01.png"
                alt
              >
              <img
                v-if="!subItem.selected"
                class="c-arrow-icon"
                src="@/assets/images/c-arrow03.png"
                alt
              >
            </div>
            <!-- 平台三级分类 -->
            <div class="tertiary-level">
              <ul :class="['t-list', ]">
                <li
                  v-if="!subItem.categories"
                  class="t-item weak"
                >
                  {{ $t('commonHead.tis1') }}
                </li>
                <li
                  v-for="(thirdItem, idx) in subItem.categories"
                  :key="idx"
                  class="t-item"
                  @click="toProdList(firstCategroyCategoryId, subItem.categoryId,thirdItem.categoryId, 0)"
                >
                  {{ thirdItem.categoryName }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div
          v-if="!categoryList.length"
          class="empty"
        >
          {{ $t('commonHead.noCategory') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  categoryList: {
    type: Array,
    default () {
      return []
    }
  },
  subCategoryList: {
    type: Array,
    default () {
      return []
    }
  },
  featuredBrands: {
    type: Array,
    default () {
      return []
    }
  },
  inShop: {
    type: Boolean,
    default () {
      return false
    }
  }
})

const emit = defineEmits(['switchSubCategory', 'toProdList', 'toSearchBrand'])

let firstCategroyCategoryId = null

const scrollBoxRef = ref(null)
onMounted(() => {
  if (props.categoryList && props.categoryList[0] && props.categoryList[0].categoryId) {
    switchCategoryItem(props.categoryList[0].categoryId)
  }
  nextTick(() => {
    scrollBoxRef.value.addEventListener('scroll', onScroll) // 监听（绑定）滚轮滚动事件
  })
})

let liCount = 0 // 向上隐藏的条目数
// 处理分类上下点击事件
const handleUpOrDownClick = (type) => {
  if (type === 'up') {
    liCount--
  } else if (type === 'down') {
    liCount++
  }
  scrollBoxRef.value.scrollTop = 55 * liCount
}

const scrollHeight = ref(0) // 滚动条的总高度
const scrollTop = ref(0)
const isBottoming = ref(false)
// 滚动条滚动
const onScroll = () => {
  // 滚动条的总高度
  scrollHeight.value = scrollBoxRef.value.scrollHeight
  // 可视区的高度
  const domHeight = scrollBoxRef.value.clientHeight
  // 当前页面的滚动条纵坐标位置
  const scrollTopPar = scrollBoxRef.value.scrollTop
  scrollTop.value = scrollTopPar
  // 计算向上隐藏的条目个数
  liCount = Math.ceil(scrollTopPar / 55)
  // 是否触底

  isBottoming.value = scrollHeight.value - domHeight === scrollTopPar
}

// 请求下级分类
const switchCategoryItem = (categoryId) => {
  firstCategroyCategoryId = categoryId
  emit('switchSubCategory', categoryId)
}

// 搜索指定分类下的商品
const toProdList = (parentId, categoryId, thCategoryId, st) => {
  emit('toProdList', parentId, categoryId, thCategoryId, st)
}

// 搜索指定品牌下的商品
const toSearchBrand = (brandId, name) => {
  emit('toSearchBrand', brandId, name)
}

defineExpose({
  toSearchBrand
})

</script>

<style lang="scss" scoped>
@use "index";
</style>
